<template>
  <div>
    <a-layout-content :style="{margin: '24px 16px',padding: '24px',background: '#fff',minHeight: '280px',}">
      <!-- 内容 -->
          <div class="clearfix" style="width:400px">

            <a-input defaultValue="500" addonBefore="图片切换间隔ms" v-model="delay"/><br><br>
            <a-input placeholder="0为无限循环" defaultValue="0" addonBefore="图片循环次数" v-model="repeat"/><br><br>
        
        <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" accept="image/png, image/jpeg" :multiple="true">
          <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>
        <a-button
          type="primary"
          :disabled="fileList.length === 0"
          :loading="uploading"
          style="margin-top: 16px"
          @click="handleUpload">
          {{ uploading ? '生成中...' : '生成' }}
        </a-button>
      </div>
      <!-- 内容 -->
      <!-- 模态框 -->
      <a-modal
      title="生成GIF图片成功"
      width="650px"
      :visible="visible"
      @cancel="handleCancel">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk">
          下载GIF
        </a-button>
      </template>
    <van-image width="600px" :src="gifUrl" />
    </a-modal>
      <!-- 模态框 -->
    </a-layout-content>
  </div>
</template>

<script>
import { uploadBatch } from "@/api/index";
export default {
  name: "GifGenerate",
  components: {uploadBatch},
  data() {
    return {
      fileList: [],
      uploading: false,
      gifUrl:'',
      visible: false,
      confirmLoading: false,
      delay:500, //GIF图片间隔时间
      repeat:0, //图片循环次数
    };
  },
  computed: {},
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('files', file);
      });
      this.uploading = true;
      uploadBatch(formData,this.delay,this.repeat).then((res) => {
        console.log('批量上传 => ',res.data.code);
        this.uploading = false;
        if(res.data.code == 200){
         this.gifUrl = res.data.data
         this.visible = true;
          this.$message.success("生成GIF图片成功");
        } else {
          this.$message.error("生成失败,请重试");
        }
      })
    },
    handleOk(e) {
      window.location.href = this.gifUrl;
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
  created() {}
};
</script>

<style >
</style>